import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Image,
    ScrollView,
    Modal,
    Animated
} from 'react-native';
import Constant from '../../../../utils/Constant'//全局变量

const screenH = Dimensions.get('window').height;

export default class MoreFunctionPop extends Component {

    constructor(props) {
        super(props);
        this.state = {
            modalAnimation: new Animated.Value(0),
        }
    };

    componentDidMount() {
        if (this.props.visible) {
            this.animateIn();
        }
    }

    componentDidUpdate(prevProps) {
        if (this.props.visible && !prevProps.visible) {
            this.animateIn();
        } else if (!this.props.visible && prevProps.visible) {
            this.animateOut();
        }
    }

    animateIn = () => {
        Animated.timing(this.state.modalAnimation, {
            toValue: 1,
            duration: 300,
            useNativeDriver: true,
        }).start();
    };

    animateOut = () => {
        Animated.timing(this.state.modalAnimation, {
            toValue: 0,
            duration: 300,
            useNativeDriver: true,
        }).start();
    };


    render() {
        const translateY = this.state.modalAnimation.interpolate({
            inputRange: [0, 1],
            outputRange: [screenH, 0],
        });

        return (
            <View style={styles.container}>
                < TouchableOpacity
                    activeOpacity={1}
                    style={{ flex: 1 }}
                    onPress={() => {
                        if (this.props.cancelHandle) {
                            this.props.cancelHandle()
                        }
                    }} />
                <Animated.View
                    style={[
                        styles.contentContainer,
                        { transform: [{ translateY }] }
                    ]}
                >
                    {
                        this.props.data.map((item, index) => {
                            return (
                                <TouchableOpacity
                                    key={index}
                                    style={[styles.itemContainer, { borderBottomWidth: index == this.props.data.length - 1 ? 0 : 0.3 }]}
                                    activeOpacity={0.95}
                                    onPress={(e) => {
                                        if (this.props.clickHandle) {
                                            this.props.clickHandle(item, index)
                                        }
                                    }}
                                >
                                    <Text style={styles.titleText}>{item.title}</Text>
                                </TouchableOpacity>
                            )
                        })
                    }
                    <View style={styles.sepLine} />
                    <TouchableOpacity
                        style={[styles.itemContainer, { borderBottomWidth: 0 }]}
                        activeOpacity={0.95}
                        onPress={() => {
                            if (this.props.cancelHandle) {
                                this.props.cancelHandle()
                            }
                        }}
                    >
                        <Text style={styles.titleText}>{'取消'}</Text>
                    </TouchableOpacity>
                    <View style={{ width: '100%', height: Constant.bottomHeight, backgroundColor: '#fff' }} />
                </Animated.View>
            </View>
        )
    }



}

const styles = StyleSheet.create({
    container: {
        position: 'absolute',
        zIndex: 1001,
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        backgroundColor: 'rgba(0,0,0,0.5)',
        flexDirection: 'column',
        justifyContent: 'flex-end',
    },
    contentContainer: {
        flexDirection: 'column'
    },
    itemContainer: {
        width: '100%',
        height: 50,
        borderBottomColor: '#e4e4e4',
        borderBottomWidth: 0.3,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#fff'
    },
    titleText: {
        color: '#333',
        fontSize: 16
    },
    sepLine: {
        backgroundColor: '#f9f9f9',
        width: '100%',
        height: 8
    }
})